<template>
  <el-drawer
    :title="title"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
  >
    <template #default>
      <el-descriptions :title="formView.name" :column="2" :border="true">
        <el-descriptions-item label="登录账号" label-align="right">{{
          formView.account
        }}</el-descriptions-item>
        <el-descriptions-item label="性别" label-align="right"
          >{{ formView.gender }}
        </el-descriptions-item>

        <el-descriptions-item label="电子邮件" label-align="right" :span="2">
          {{ formView.email }}
        </el-descriptions-item>
        <el-descriptions-item label="员工编号" label-align="right">
          <el-tag size="small"> {{ formView.employeeNumber }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="手机号" label-align="right">
          {{ formView.mobile }}
        </el-descriptions-item>
        <el-descriptions-item label="单位名称" label-align="right">
          {{ formView.orgName }}
        </el-descriptions-item>
        <el-descriptions-item label="部门名称" label-align="right">
          {{ formView.deptName }}
        </el-descriptions-item>
        <el-descriptions-item label="状态" label-align="right" :span="2">
          <el-tag size="small" v-if="formView.status == 1"> 正常</el-tag>
          <el-tag size="small" v-if="formView.status == 0" type="danger">
            禁用</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="备注" label-align="right" :span="2">
          {{ formView.description }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <el-button @click="state.dialogFormVisible = false">取消</el-button>
      <el-button @click="handleClose(true)" type="primary">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
    visible: boolean;
  }>(),
  {
    visible: false,
  }
);

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const state = reactive({
  dialogFormVisible: false,
});

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const formView = ref({
  accountId: "",
  account: "",
  name: "",
  gender: 2,
  employeeNumber: "",
  orgName: "",
  orgCode: "",
  deptName: "",
  deptCode: "",
  status: 1,
  email: "",
  mobile: "",
  description: "",
  password: "",
  password1: "",
  password2: "",
});

const show = (row: any) => {
  //   console.log(form);
  formView.value = row;
  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
